<template>
  <div class="login_container">
    <!--登录区-->
    <div class="login_box">
      <!--头像-->
      <div class="avatar_box">
        <img src="../assets/img/1.gif">
      </div>
      <!--表单-->
      <el-form :model="loginDto" :rules="loginRules" ref="loginFrom" label-width="50px" class="login-from">
        <el-form-item  prop="username">
          <el-input v-model="loginDto.username" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input v-model="loginDto.password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item  prop="verfyCode">
          <div class="verifyCode_box">
            <el-input v-model="loginDto.verfyCode" prefix-icon="el-icon-mobile" class="verfy_code"></el-input>
           <el-image src='http://localhost:8081/apis/kaptcha/img' onclick="this.src='http://localhost:8081/apis/kaptcha/img'"></el-image>
          </div>
        </el-form-item>
        <el-form-item class="login_btn">
          <el-button type="primary" @click="submitForm('loginFrom')">立即登录</el-button>
          <el-button @click="resetForm('loginFrom')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import {loginDtos} from '@/api/login'
import {yanzhengCode} from '@/api/login'

export default {
  name: 'Login',
  data() {
    return {
      loginDto: {
        username: 'gangjichao',
        password:'',
        verfyCode:''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        verfyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },

    };
  },
  created () {
    let lett = this;
    document.onkeydown = function(e) {
      let key = e.keyCode;
      if (key == 13){
        lett.submitForm('loginFrom')
      }

    }
  },
  methods: {
    submitForm(formName) {
     // yanzhengCode(this.loginDto.verfyCode).then(res =>{
     //   if(res.data.code == 200){
         this.$refs[formName].validate((valid) => {
           if (valid) {
             //登录完成之后跳转
             this.login()
           } else {
             return false;
           }
         });
       // }else {
       //   this.$message.error(res.data.msg)
       // }
     // },error =>{
     //   this.$message.error(error.data.msg)
     // }
     // )
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    login(){
      loginDtos(this.loginDto).then(res => {
        if(res.data.code == 200){
          console.log(res)
          const _this =this
          const jwt = res.headers['authorization']
          const userInfo = res.data.data.userInfo
          const menuList = res.data.data.menuList
          const permissions = res.data.data.permissions
          const roleList = userInfo.roles

          const router = res.data.data.router
          _this.$store.commit("SET_TOKEN",jwt)
          _this.$store.commit("SET_USERINFO",userInfo)
          _this.$store.commit("SET_MENULSIT",menuList)
          _this.$store.commit("SET_ROLELIST",roleList)
          _this.$store.commit("SET_PERMISSIONS",permissions)




          _this.$store.commit("SET_ROUTER",router)
          
          this.$router.push({
            name: 'Main',
            params: {
              avatar:userInfo.avatar,
              nickname:userInfo.nickname
              // MenuList:menuList
            }
          })
        }else {
          this.$message.error(res.data.msg)
        }

        }
        ,err => {
          console.log("222");
          console.log("进入login error200")
          console.log(err);
        }
      )
    },
  },

}
</script>

<style lang = "less" scoped>
  .login_container{
    height: 100%;
    background-color: #001529;
  }
  .login_box{
    width: 450px;
    height: 380px;
    background-color: #FFFFFF;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

    .avatar_box{
      width: 130px;
      height: 130px;
      border: 1px solid #eeeeee;
      border-radius: 50%;
      padding:10px;
      box-shadow:  0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin: -65px auto;
      background-color: #FFFFFF;

      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #EEEEEE;
      }
    }
    .login-from{
      position: absolute;
      bottom: 0px;
      width: 400px;
      padding: 0px;
      box-sizing: border-box;
      .login_btn{
        display: flex;
        justify-content: flex-end;
      }
      .verifyCode_box{
        display: flex;
        .verfy_code{
          width: 70%;
          justify-content: left;
        }
        .verfy_img{
          width: 30%;
          height: 45px;
          justify-content: flex-end;
        }
      }
    }

  }
</style>
